import { Drawer, Form, Button, Col, Row, Input, Select, message, Upload } from 'antd';
import React, { Component } from 'react';
import { EditOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { productImgEdit } from '../../../services/auth';

const { Option } = Select;

// 用于上传的函数
function getBase64(img, callback) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result));
	reader.readAsDataURL(img);
}

function beforeUpload(file) {
	const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
	if (!isJpgOrPng) {
		message.error('You can only upload JPG/PNG file!');
	}
	const isLt4M = file.size / 1024 / 1024 < 4;
	if (!isLt4M) {
		message.error('Image must smaller than 4MB!');
	}
	return isJpgOrPng && isLt4M;
}

export default class EditProduct extends Component {
	constructor(props) {
		super(props);
		const { handleEditClick } = this.props;
		this.handleEditClick = handleEditClick;
		this.state = { visible: false, imageUrl: this.props.product.picture };
	}
	formRef = React.createRef();

	onReset = () => {
		const { product } = this.props;
		if (this.formRef.current) {
			this.formRef.current.setFieldsValue({
				id: product.id,
				name: product.name,
				status: product.status,
				type: product.type,
				specification: product.specification,
				price: product.price,
				weight: product.weight,
				description: product.description
			});
		}
		this.setState({ imageUrl: product.picture });
	};

	// 用于上传
	state = {
		loading: false
	};

	handleChange = (info) => {
		this.setState({ file: info.file.originFileObj });
		getBase64(info.file.originFileObj, (imageUrl) =>
			this.setState({
				imageUrl,
				loading: false
			})
		);
	};

	showDrawer = () => {
		this.setState({
			visible: true
		});
	};

	onClose = () => {
		this.setState({
			visible: false
		});
	};

	onFinish = (value) => {
		this.handleEditClick(value);
		if (this.state.file) {
			let formData = new FormData();
			formData.append('id', value.id);
			formData.append('file', this.state.file);
			productImgEdit(formData);
		}
		this.onClose();
	};

	render() {
		// 用于上传
		const { loading, imageUrl } = this.state;
		const uploadButton = (
			<div style={{ height: 135 }}>
				{loading ? <LoadingOutlined /> : <PlusOutlined />}
				<div style={{ marginTop: 20 }}>Upload</div>
			</div>
		);
		const { product } = this.props;
		return (
			<div>
				<Button
					type="link"
					onClick={this.showDrawer}
					size="small"
					icon={<EditOutlined />}
					style={{ fontWeight: 'bold' }}
				>
					编辑
				</Button>
				<Drawer
					title="修改商品信息"
					width={500}
					onClose={this.onClose}
					visible={this.state.visible}
					bodyStyle={{ paddingBottom: 80 }}
				>
					<Form layout="vertical" hideRequiredMark onFinish={this.onFinish} ref={this.formRef}>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item name="id" label="商品编号" initialValue={product.id}>
									<Input disabled />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="name"
									label="商品名称"
									initialValue={product.name}
									rules={[ { required: true, message: '请输入名称' } ]}
								>
									<Input />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item
									name="status"
									label="状态"
									rules={[ { required: true, message: '请选择状态' } ]}
									initialValue={product.status}
								>
									<Select placeholder="必选项">
										<Option value="上架">上架</Option>
										<Option value="下架">下架</Option>
									</Select>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="type"
									label="类型"
									rules={[ { required: true, message: '请选择类型' } ]}
									initialValue={product.type}
								>
									<Select placeholder="必选项">
										<Option value="iPhone">iPhone</Option>
										<Option value="MacBook">MacBook</Option>
										<Option value="iPad">iPad</Option>
										<Option value="Watch">Watch</Option>
										<Option value="AirPods">AirPods</Option>
									</Select>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item
									name="specification"
									label="规格"
									initialValue={product.specification}
									rules={[ { required: true, message: '请输入规格' } ]}
								>
									<Input />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item
									name="price"
									label="价格"
									initialValue={product.price}
									rules={[ { required: true, message: '请输入价格' } ]}
								>
									<Input />
								</Form.Item>
							</Col>
						</Row>

						<Row gutter={24}>
							<Col span={12}>
								<Form.Item
									name="weight"
									label="净重"
									initialValue={product.weight}
									rules={[ { required: true, message: '请输入净重' } ]}
								>
									<Input />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24}>
							<Col span={12}>
								<Form.Item name="picture" label="图片">
									<Upload
										name="avatar"
										listType="picture-card"
										className="avatar-uploader"
										showUploadList={false}
										beforeUpload={beforeUpload}
										onChange={this.handleChange}
									>
										{imageUrl ? (
											<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
										) : (
											uploadButton
										)}
									</Upload>
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item name="description" label="详情" initialValue={product.description}>
									<Input.TextArea rows={12} />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} />

						<Form.Item>
							<div
								style={{
									textAlign: 'right'
								}}
							>
								<Button onClick={this.onClose} style={{ marginRight: 8 }}>
									取消
								</Button>
								<Button onClick={this.onReset} style={{ marginRight: 8 }}>
									重置
								</Button>
								<Button type="primary" htmlType="submit">
									提交
								</Button>
							</div>
						</Form.Item>
					</Form>
				</Drawer>
			</div>
		);
	}
}
